<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	ul{
		width: 206px;
		height: 408px;
		border: 2px solid #E43C3F;
		margin: 15px;
		background: #FAFAFA;
		position: relative;
	}
	ul li{
		width: 206px;
		height: 28px;
		border-bottom: 1px solid #333;
		list-style: none;
	}
	ul li p{
		width: 206px;
		height: 28px;
		text-indent: 13px;
		font-size: 14px;
		color: #333;
		line-height: 28px;
	}
	 ul li p.cur{
		background: white;
		position: relative;
		z-index: 1;
		font-weight: 700;
	} 
	ul li div{
		width: 500px;
		height: 500px;
		border: 1px solid black;
		position: absolute;
		top: 0;
		left: 205px;
		font-size: 30px;
		line-height: 500px;
		text-align: center;
		background: white;
		display: none;
	} 
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('ul li').hover(function() {
			// 找到li里面的p标签，加上class cur
			$(this).find('p').addClass('cur');
			// 让里面的隐藏区域显示
			$(this).find('div').show();
		}, function() {
			$(this).find('p').removeClass('cur');

			$(this).find('div').hide();			
		});
	})
</script>
</head>

<body>

<ul>
	<li>
		<p>图书、音像、数字商品</p>
		<div>
			图书、音像、数字商品
		</div>
	</li>
	<li>
		<p>家用电器、手电筒</p>
		<div>
			家用电器、手电筒
		</div>
	</li>
	
</ul>



</body>
</html>
